<template>
  <div class="box">
    <!-- 左对齐 -->
    <div class="box_head">
      <list-title>推荐歌单</list-title>

      <span @click="toSongList"><small>更多</small><van-icon name="arrow" size="16"  /></span>
    </div>
    <van-row type="flex"  class="box">
      <van-col
        span="6"
        v-for="item in songs.slice(0,4)"
        :key="item.id"
        @click="toDetail(item.id)"
      >
        <van-image
          radius=".3125rem"
         width="91.75"
          height="91.75"
          lazy-load
          :src="item.picUrl + '?param=120y120'"
        >
          <span class="playCount"
            ><span class="iconfont">&#xe628;</span
            >{{ Math.floor(item.playCount / 10000) }} 万</span
          >
        </van-image>
        <span class="van-multi-ellipsis--l2">{{ item.name }}</span>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import ListTitle from "@/components/video/ListTitle";
export default {
  name: "MusicRecomenSongs",
  props: ["songs"],
  data() {
    return {};
  },

  mounted() {},
components:{ ListTitle},
  methods: {
    toDetail(id) {
      this.$router.push({
        path: "/MusicDetail",
        query: { id },
      });
    },
    toSongList() {
      this.$router.push("/MusicSongsListMore");
    },
  },
};
</script>

<style lang="less" scoped>
.box{padding-top: 8px;}
.box_head {
  height: 1.5625rem;
  line-height: 1.5625rem;
  margin-top: 5px;
   padding: 0.3125rem 0rem;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
   background: url(../../static/img/wrap.jpg) repeat-x 0 0; /* 添加图文列表整体的背景图片 */
 span{
   color: rgba(26,26,26,.5);
   font-size: 13px;
    font-weight: 300;
    display: block;
    min-height: 3.15rem;
  }
}
.box {
  .van-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .3125rem;
    font-size: .75rem;
    border-radius: .3125rem;
   
box-sizing: border-box;
    box-shadow: 0 0 12px 1px rgba(205, 205, 205, 1); /* 设计栏目阴影*/
    border: 1px solid black;
    text-shadow: black 1px 2px 2px;  /* 设计包含文本阴影 */
    color: white;
    /* 设计直线渐变背景 */
    background-image: -moz-linear-gradient(bottom, black, rgba(0, 47, 94, 0.4));
    background-image: linear-gradient(to bottom, black, rgba(0, 47, 94, 0.4));
    background-color: rgba(43, 43, 43, 0.5);

    .van-image {
      position: relative;
      position: relative;
      .playCount {
        position: absolute;
        top: .1875rem;
        right: .1875rem;
        color: #ccccfe;
       
        border-radius: .1875rem;
        .iconfont {
          font-size: .625rem;
        }
      }
      .van-multi-ellipsis--l2{
         width: 160px;
         color: rgba(26,26,26,1);
         text-overflow: ellipsis;
         font-size: .13rem;
         font-weight: 300;
    height: 40px;
    margin-top: 10px;
    line-height: 20px;
    -webkit-line-clamp: 2;
    opacity: .5;
    font-weight:300;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
      }
    }
  }
}
</style>